<template>
  <div class="login flex-center">
    <div class="container flex-center">
      <!-- 登录页 -->
      <div id="login" class="content" v-show="loginShow">
        <div class="title flex-align">
          <h1>政务管理系统账号登录</h1>
          <p>Background System</p>
        </div>
        <div class="form-box">
          <el-form :model="loginForm" :rules="loginFormRules" ref="loginForm">
            <el-form-item prop="userName">
              <el-col :span="3">
                <img src="../../assets/imgs/person.png">
              </el-col>
              <el-col :span="21">
                <el-input v-model="loginForm.userName" placeholder="请输入用户名" clearable/>
              </el-col>
            </el-form-item>
            <el-form-item prop="passward">
              <el-col :span="3">
                <img src="../../assets/imgs/block2.png">
              </el-col>
              <el-col :span="21">
                <el-input v-model="loginForm.passward" placeholder="请输入密码" clearable/>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="21" :offset="3">
                <el-select v-model="loginForm.deptId" clearable placeholder="请选择部门" style="width:100%;">
                  <el-option
                    v-for="item in deptList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId"
                  />
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="21" :offset="3" class="flex-between">
                <div id="getPsdBtn" @click="getPsdPage">忘记密码</div>
                <div id="registBtn" @click="showRegistPage">去注册</div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="21" :offset="3">
                <el-button id="login-button" @click="loginSubmit" style="width:100%;">登录</el-button></el-col>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
  },
  data() {
    return {
      loginShow: true,
      getPsdVisbale: false,
      registVisbale: false,
      loginForm: {
        userName: 'admin',
        passward: '123',
        deptId: ''
      },
      //行政部列表
      deptList: [
        {deptId: 'xz1',deptName: '行政部'},
        {deptId: 'xz2',deptName: '财务部'},
        {deptId: 'xz3',deptName: '人事部'},
        {deptId: 'xz4',deptName: '后期部'}
      ],
      loginFormRules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        passward: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    //登录按钮
    loginSubmit() {
      console.log(this.loginForm);
      // 由于暂无后端服务，虚拟登录
      if (this.loginForm.userName == 'admin' && this.loginForm.passward == '123') {
        this.$router.push("/home");
      }else {
        alert('账号：admin    密码:123')
      }
    },

    //注册页
    showRegistPage() {
      this.$router.push("/Register")
    },
    //忘记密码
    getPsdPage() {
      this.$router.push("/getPsd")
    }
    }
  }

</script>

<style lang="less" scoped>
.login {
  // width: 1680px;
  width: 100%;
  // height: 1080px;
  height: 100%;
  min-height: fit-content;
  background: url('@/assets/imgs/background.jpg') no-repeat center;
  background-size: cover;
  .container {
    max-width: 1059px;
    width: 63%;
    max-height: 674px;
    height: 80%;
    min-height: fit-content;
    background-color: #fff;
    border: solid 1px #666666;

  }
  // #login {
  //   img {
  //     width: 40px;
  //     height: 40px;
  //   }
  // }
}
.content {
  width: 405px;
  max-height: 510px;
  // background-color: pink;
}
.title {
  margin-bottom: 46px;
  color: black;
  font-size: 16px;
  h1 {
    font-size: 24px;
    font-weight: 400;
  }
}
.el-form-item {
  height: 40px;
  margin-bottom: 36px !important;
  margin-bottom: 9% !important;
}
.el-form-item__error {
  left: 12.5% !important;
}
#login-button {
  background-color: #00CCCC;
  color: #fff;
}
#login-button:hover {
  scale: 1.02;
}
#getPsdBtn:hover,
#registBtn:hover {
  color: #00CCCC;
  cursor: pointer;
}

</style>
